<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <div id="app">
    <table class="table table-bordered" style="width: 600px;margin:20px auto;">
      <tr>
        <th>商品名字</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
      <tr v-if="items.length === 0">
        <td colspan="5" class="text-center">
          暂无商品
        </td>
      </tr>
      <tr v-for="(item,index) in items" :key="index">
        <td>
          <input type="checkbox" @change="itemSelectedChange" v-model="item.selected">
          {{item.name}}
        </td>
        <td>
          ￥ {{item.price}}
        </td>
        <td>
          <button @click="addNum(index)" class="btn btn-xs">+</button>
          <span>{{item.num}}</span>
          <button class="btn btn-xs" @click="reduceNum(index)">-</button>
        </td>
        <td>
          ￥{{ (item.num*item.price).toFixed(2) }}
        </td>
        <td>
          <button class="btn btn-danger" @click="delItem(index)">删除</button>
        </td>
      </tr>

      <tr>
        <td>合计:</td>
        <td colspan="4">
          全选：
          <input type="checkbox" @change="allCheckedChange" v-model="allChecked">
          总价格：￥{{total}}
        </td>
      </tr>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        items: [
          {
            name: '商品1',
            price: 18.8,
            num: 1,
            selected: true
          },
          {
            name: '商品2',
            price: 28.8,
            num: 2,
            selected: true
          },
          {
            name: '商品3',
            price: 166.88,
            num: 1,
            selected: true
          },
          {
            name: '商品4',
            price: 188,
            num: 1,
            selected: true
          }
        ],
        allChecked: true, // 是否全选,
        total: 0 // 总价格
      },
      methods: {
        allCheckedChange(){
          this.items.forEach(item=> {
            item.selected = this.allChecked
          })
          this.calcTotal();
        },
        itemSelectedChange(){
          // 商品选中状态发生改变
          // 重新计算总价格和全选状态即可
          this.calcAllChecked();
          this.calcTotal();
        },
        delItem(index){
          if(confirm('确认删除吗?')){
            this.items.splice(index, 1);
            this.calcTotal();
          }
        },
        reduceNum(index){
          // 减少购买数量
          this.items[index].num--;
          if(this.items[index].num<=1){
            this.items[index].num=1;
          }
           // 重新计算总价格
           this.calcTotal();
        },
        addNum(index){
          // 增加购买数量
          this.items[index].num++;
          // 重新计算总价格
          this.calcTotal();
        },
        calcTotal(){
          // 计算总价格
          /* 
            所有的已经选中的商品 价格*数量的总合
          */
          // 过滤掉未选中的商品
          const selectedItems = this.items.filter(item => item.selected);
          this.total = 0;
          selectedItems.forEach(item => {
            this.total += item.num * item.price
          })
          // 保留两位小数点
          this.total = parseFloat(this.total.toFixed(2));
        },
        calcAllChecked(){
          /* 
            所有商品都选中 则 全选未true
            有一个未选中则 全选未 false
          */
          this.allChecked = this.items.every(item => item.selected);
        }
      }
    })

    vm.calcTotal();
    vm.calcAllChecked();
  </script>
</body>
</html>